<!-- Recursion Demo Test -->
<template>
  <div class="recursion-index">
    <el-form>
      <template v-for="(paramItem, itemKey) in CardSiteDataEditableParamsLists.PAGE_INFO">
        <EditableParam
          :key="itemKey"
          :compId="null"
          :paramItem="paramItem"
          :paramKey="itemKey"
          :paramVal="pageInfo.toolbar_menus"
          :parentKeys="[]"
          :parentVal="pageInfo"
          :original="pageInfo"
          :editableParamsLists="CardSiteDataEditableParamsLists"
          :editableParamsLists4Add="CardSiteDataEditableParamsDefaultLists4ListAdd"
          type="PAGE_INFO"
          @change="onChange(arguments)">
        </EditableParam>
      </template>
    </el-form>
  </div>
</template>

<script>
  import {
    CardSiteDataEditableParamsLists,
    CardSiteDataEditableParamsDefaultLists4ListAdd
  } from '@/views/card/js/data/cardSiteData';

  import { mapState, mapActions } from 'vuex'
  export default {
    name: 'recursion',
    data() {
      return {
        CardSiteDataEditableParamsLists: CardSiteDataEditableParamsLists,
        CardSiteDataEditableParamsDefaultLists4ListAdd: CardSiteDataEditableParamsDefaultLists4ListAdd,
      }
    },
    computed: {
      ...mapState({
        pageInfo: state => _.cloneDeep(state.cardComponents.siteData.attrs),
      }),
    },
    components: {
      'EditableParam': () => import('@/views/card/components/recursion/EditableParam.vue'),
    },
    methods: {
      ...mapActions({
        updateCardPageInfo: 'cardComponents/updateCardPageInfo',
      }),
      onChange(args) {
        this.updateCardPageInfo(args[0]);
      },
    },
  }
</script>

<style lang="scss">
  .recursion-index {
    .el-input__inner {
      height: 30px;
    }
  }
</style>
